<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deepseek 智能对话</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- 聊天区域 -->
            <div class="col-md-9 p-0 d-flex flex-column vh-100">
                <!-- 导航栏 -->
                <nav class="navbar navbar-dark bg-primary">
                    <div class="container-fluid">
                        <span class="navbar-brand">
                            <i class="bi bi-braces"></i> Deepseek 智能对话
                        </span>
                        <div class="d-flex align-items-center">
                            <button id="clearChatBtn" class="btn btn-sm btn-outline-light me-2">
                                <i class="bi bi-trash"></i> 清空对话
                            </button>
                            <button id="settingsToggleBtn" class="btn btn-sm btn-outline-light">
                                <i class="bi bi-gear"></i> 设置
                            </button>
                        </div>
                    </div>
                </nav>
                
                <!-- 聊天消息区域 -->
                <div id="chatContainer" class="flex-grow-1 overflow-auto p-3">
                    <div class="welcome-message">
                        <h4>欢迎使用 Deepseek 智能对话</h4>
                        <p>请输入您的问题，开始对话吧！</p>
                    </div>
                    <div id="messagesContainer">
                        <!-- 消息将在这里动态添加 -->
                    </div>
                </div>
                
                <!-- 输入区域 -->
                <div class="chat-input-area p-3 border-top">
                    <div class="input-group">
                        <textarea id="userInput" class="form-control" 
                                  placeholder="请输入您的问题..." rows="2"></textarea>
                        <button id="sendBtn" class="btn btn-primary">
                            <i class="bi bi-send"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏设置面板 -->
            <div id="settingsPanel" class="col-md-3 bg-light vh-100 settings-panel">
                <div class="p-3">
                    <h5 class="mb-4 pb-2 border-bottom">模型设置</h5>
                    
                    <div class="mb-3">
                        <label for="modelSelect" class="form-label">模型</label>
                        <select id="modelSelect" class="form-select">
                            <option value="qwen" selected>阿里通义千问</option>
                            <option value="deepseek">Deepseek</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="temperatureRange" class="form-label">
                            温度 (<span id="temperatureValue">0.7</span>)
                        </label>
                        <input type="range" class="form-range" id="temperatureRange"
                               min="0" max="2" step="0.1" value="0.7">
                        <small class="text-muted">较高的值会使输出更加随机，较低的值会使其更加集中和确定。</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="maxTokensRange" class="form-label">
                            最大生成长度 (<span id="maxTokensValue">1024</span>)
                        </label>
                        <input type="range" class="form-range" id="maxTokensRange"
                               min="16" max="4096" step="16" value="1024">
                    </div>
                    
                    <div class="mb-3">
                        <label for="topPRange" class="form-label">
                            Top P (<span id="topPValue">0.9</span>)
                        </label>
                        <input type="range" class="form-range" id="topPRange"
                               min="0.1" max="1" step="0.05" value="0.9">
                    </div>
                    
                    <div class="mb-3">
                        <label for="topKRange" class="form-label">
                            Top K (<span id="topKValue">40</span>)
                        </label>
                        <input type="range" class="form-range" id="topKRange"
                               min="1" max="100" step="1" value="40">
                    </div>
                    
                    <div class="mb-3">
                        <label for="repetitionPenaltyRange" class="form-label">
                            重复惩罚 (<span id="repetitionPenaltyValue">1.0</span>)
                        </label>
                        <input type="range" class="form-range" id="repetitionPenaltyRange"
                               min="1.0" max="2.0" step="0.1" value="1.0">
                    </div>
                    
                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="doSampleSwitch" checked>
                        <label class="form-check-label" for="doSampleSwitch">随机采样</label>
                    </div>
                    
                    <button id="resetSettingsBtn" class="btn btn-secondary mt-3">
                        重置为默认设置
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="/static/js/main.js"></script>
</body>
</html> 